<template>
	<el-carousel :interval="4000" indicator-position="none" style="grid-area:  3 / 3 / 26 / 29;">
		<el-carousel-item v-for="imgUnit in item.imgList" :key="imgUnit">
			<img :src="imgUnit" alt="" />
		</el-carousel-item>
	</el-carousel>
</template>

<script setup>
	import {
		reactive
	} from 'vue'

	// 同样.通过父组件的传值来获取值
	let props = defineProps(["Unit"]);
	let item = reactive(props.Unit);
</script>

<style scoped>
	.el-carousel__item img {
		width: 100%;
		height: 100%;
		border: 3px solid #636363;
		box-sizing: border-box;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n + 1) {
		background-color: #d3dce6;
	}
</style>